/**
 * @author Haidar Osman
 */
var BasicShape = function( header, isMethod, parentShape,member) {
	this.parentShape = parentShape;
	this.member=member;
	var that = this;
	
	this.signature = new Kinetic.Text({
		x : 50,
		y : 50,
		text : that.member.name,
		fontSize : 10,
		fontFamily : "Calibri",
		textFill : styles.memberTextColor,
		//textStroke : "#444",
		padding : 3,
		align : "left",
		verticalAlign : "middle",
		name : header
	});
	this.isMethod = isMethod;
	this.rect = new Kinetic.Rect({
		x : this.signature.x - this.signature.padding,
		y : this.signature.y - this.signature.padding,
		width : this.signature.text.length * this.signature.fontSize,
		height : 2 * this.signature.fontSize + 2 * this.signature.padding,
		fill : styles.classBackgroundColor,
		stroke : styles.memberRectColor,
		strokeWidth : 1,
		draggable : true,
		name : header + "Rect"
	});
	this.group = new Kinetic.Group({
		name : that.member.name
	});

	
	this.group.add(this.rect);
	this.group.add(this.signature);
	this.scale = function(scaleY) {
		that.rect.height = that.rect.height * scaleY;
		that.signature.fontSize = (that.rect.height - 2 * that.signature.padding) / 2;
		that.rect.width = that.signature.width + 4 * that.signature.padding;
	}
	this.setName = function(name) {
		that.group.name = name;
		that.signature.name = name;
		that.signature.text = name;
		that.rect.name = name + "Rect";
		that.member.name=name;
	}
	this.onClick=function() {
		var mouseX = that.rect.getAbsolutePosition().x + that.signature.padding + $("#" + that.rect.getStage().getContainer().id).prop("offsetLeft");
		var mouseY = that.rect.getAbsolutePosition().y + that.signature.padding + $("#" + that.rect.getStage().getContainer().id).prop("offsetTop");
		var formString = "<div id='addMemberPopUp' style='position:absolute;top:" + mouseY + "px;left:" + mouseX + "px;z-index:30;'>" + "<input type='text' value= '" + that.group.name + "' id='memberName' autofocus style='width:" + that.rect.width + "px; font-size:" + that.signature.fontSize + "px;  '/>" + "<input type='button' value='save' id='saveMemberForm'>" + "<input type='button' value='cancel' id='cancelMemberForm'>" + "</div>"

		if($('#memberName').length !== 0) {
			$('#addMemberPopUp').remove();
		}

		$("#" + that.rect.getStage().getContainer().id).before(formString);
		$('input#memberName').focus();
		$('input#memberName').select();
		$('#memberName').keydown(function(event) {
			if(event.which == 13) {
				var name = $('input#memberName').val();
				if(that.group.name == "") {
					if(name !== "") {
						that.parentShape.addMember(name);
					}
				} else {
					if(name == "") {
						that.parentShape.removeMember(that.signature.text);
					} else {
						that.setName(name);
					}
				}
				$('#addMemberPopUp').remove();
				that.parentShape.parentShape.update();

			} else if(event.which == 27) {
				$('#addMemberPopUp').remove();
			}
		});
		$('#saveMemberForm').click(function() {
			var name = $('input#memberName').val();
			if(that.group.name == "") {
				if(name !== "") {
					that.parentShape.addMember(name);
				}
			} else {
				if(name == "") {
					that.parentShape.removeMember(that.signature.text);
				} else {
					that.setName(name);
				}
			}
			$('#addMemberPopUp').remove();
			that.parentShape.parentShape.update();
		});
		$('#cancelMemberForm').click(function() {
			$('#addMemberPopUp').remove();
		});
	}
	this.signature.on("dblclick", this.onClick);
	this.rect.on("dblclick", this.onClick);
}